<template>
  <page-view :title="false">
    <a-card :bordered="false" :style="{ height: '100%' }">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="5" :sm="15">
              <a-form-item label="角色名称">
                <a-input placeholder="请输入" v-model="queryParam.roleName"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="this.fetch">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-operator">
        <a-button v-action:add class="editable-add-btn" @click="$refs.modal.add()">新增</a-button>
      </div>
      <a-table
        :columns="columns"
        :dataSource="data"
        :rowKey="record => record.roleId"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template slot="operation" slot-scope="text, record">
          <a @click="handleEdit(record)"><a-icon type="edit" />编辑</a>
          <a-popconfirm
            title="确认删除?"
            @confirm="() => handleDel(record.roleId)"
          >
            <a-divider type="vertical" />
            <a href="javascript:;"><a-icon type="delete" />删除</a>
          </a-popconfirm>
        </template>
      </a-table>
      <role-modal ref="modal" @ok="handleOk" />
    </a-card>
  </page-view>
</template>

<script>
  import { PageView } from '@/layouts'
  import RoleModal from './RoleModal'
  import {axios} from '../../utils/request'
  export default {
  name: 'RoleList',
  components: {
    PageView,
    RoleModal
  },
  data () {
    return {
      data:[],
      pagination: {
        current:1,
        total: 0,
        pageSize: 10,//每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ['10','20', '50', '100'],//每页中显示的数据
        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
      },
      queryParam:{
        page:1,
        pageSize:10,
        roleName:''
      },
      columns: [
        {title: '序号',customRender: (value, row, index) => `${(this.pagination.current-1)*this.pagination.pageSize+index+1}`},
        {
          title: '角色编号',
          dataIndex: 'roleId',
        },
        {
          title: '角色名称',
          dataIndex: 'roleName',
        },
        {
          title: '角色描述',
          dataIndex: 'describe',
          ellipsis: true
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
    }
  },
  created () {
    this.fetch()
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.queryParam.page = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.fetch()
    },
    fetch() {
      axios({
        url: '/role/list',
        method: 'get',
        params: this.queryParam
      }).then(response => {
         //  const pagination = { ...this.pagination }
           // pagination.total = 200
          this.data = response.result
         this.pagination.total=response.total
         // this.pagination = pagination
      })
    },
    handleEdit(record){
      this.$refs.modal.edit(record)
    },
    handleDel(roleId){
      axios.delete('/role/delete/'+roleId).then((response)=>{
        if (response.code == 200) {
          this.handleOk()
          this.$message.success('删除成功！')
        } else {
          this.$message.error('删除失败！'+response.msg)
        }
      })
    },
    handleOk(){
        this.fetch()
    }

  }
}
</script>

<style scoped>

</style>
